<template>
	<view >
		<u-form-item
			:required="item.required"
			:label="item.label"
			:prop="item.key"
			@click="showPicker = true; hideKeyboard()"
		>
			<u--input
				v-model="checkValue[item.keyName]"
				disabled
				disabledColor="#ffffff" inputAlign="right"
				:placeholder="item.placeholder || '请选择'+item.label "
				border="none"
			></u--input>
			<view slot="right" style="display: flex;">
				<u-icon
					name="arrow-right"
				></u-icon>
			</view>
		</u-form-item>
		
		<u-picker :show="showPicker" :columns="item.list" :keyName="item.keyName || 'label'" immediateChange 
			closeOnClickOverlay @close="cancel" @cancel="cancel" @confirm="confirm"></u-picker>
	</view>
	
</template>

<script>
	export default {
		name:"base-form-picker",
		props: {
			item:{
				type:Object,
				default:{}
			},
			value:{
				type:[String,Number],
				required: true
			},
			// 自定义需要展示的text属性键名
			keyName:{
				type:String,
				default:"label"
			},
			// 自定义需要展示的text属性id
			keyId:{
				type:String,
				default:"id"
			},
		},
		model: {
		    prop: 'value', // 默认是value
		    event: 'input', // 默认是input
		  },
		// emits: ['update:value'],
		data() {
			return {
				columns:this.list,
				newValue:this.value,
				checkValue:{},// 选中对象
				checkValueArry:[],// 选中对象列表
				showPicker:false,
				
			};
		},
		created() {
			// console.log(111111,this.value)
		},
		onReady(){
			// console.log('初始值',this.value)
			if(typeof this.value == 'string' && this.value){
				// 判断是不是有,分隔的字符串 分别给checkValue 和 checkValueArry赋予初始值
				const arry = this.value.split(',')
				if(arry.length == 1){// 单列选择
					this.checkValue = this.item.list[0].find(item => item[this.keyId] == this.value)
				}else{ // 多列选择
					// TODO 多列处理
				}
					
			}else if(typeof this.value == 'number'){ // 当只传了一个 说明是单列
				console.log(1111111)
				this.checkValue = this.item.list[0].find(item => item[this.keyId] == this.value)
			}
		},
		watch: {
			newValue: {
				immediate: false,
				handler(newVal, oldVal) {
					// console.log('pick选择',newVal,oldVal)
					this.valueChange(newVal);
				},
			},
		},
		methods: {
			
			cancel(){
				this.showPicker = false
			},
			confirm(e){
				console.log(e) 
				if(e.value.length == 1){ // 单列选择
					this.checkValue =  e.value[0]
					this.newValue = e.value[0][this.keyId]
				}else{ // 多列选择
					this.checkValueArry = e.value
					// TODO 多列处理
				}
				
				this.showPicker = false
			},
			// 内容发生变化，进行处理
			valueChange(newVal) {
				this.$emit("input", newVal);
				this.$emit("change", newVal);
			},
			// 通过value 获取选中的对象
			getCheckValue(){
				
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
		}
	}
</script>

<style>
.cell-box{
	margin: 10rpx 20rpx;
	padding-left: 10rpx;
	padding-right: 10rpx;
	border-radius: 10rpx;
	border: 1px solid #eee;
}
</style>